<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Event</title>
    <script src="../Vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <!--自动计数-->
        <h1>{{count}}</h1>
        <button v-on:click="count+=1">计数按钮</button>
        <!--触发对象-->
        <button v-on:click="greet">对象触发</button>
        <!--内联处理,原始DOM$event-->
        <button v-on:click="say('hi',$event)">函数调用</button>


        <!-- 阻止单击事件继续传播 -->
        <a v-on:click.stop="doThis"></a>
        <!-- 提交事件不再重载页面 -->
        <form v-on:submit.prevent="onSubmit"></form>
        <!-- 修饰符可以串联 -->
        <a v-on:click.stop.prevent="doThat"></a>
        <!-- 只有修饰符 -->
        <form v-on:submit.prevent></form>
        <!-- 添加事件监听器时使用事件捕获模式 -->
        <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
        <div v-on:click.capture="doThis">...</div>
        <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
        <!-- 即事件不是从内部元素触发的 -->
        <div v-on:click.self="doThat">...</div>
        <!-- 点击事件将只会触发一次 -->
        <a v-on:click.once="doThis"></a>
        <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
        <input v-on:keyup.enter="submit">
        <!-- Ctrl + Click -->
        <div v-on:click.ctrl="doSomething">Do something</div>

        <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
        <button v-on:click.ctrl="onClick">A</button>
        <!-- 有且只有 Ctrl 被按下的时候才触发 -->
        <button v-on:click.ctrl.exact="onCtrlClick">A</button>
        <!-- 没有任何系统修饰符被按下的时候才触发 -->
        <button v-on:click.exact="onClick">A</button>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data:{
            	count:0
            },
            methods:{
            	greet:function (event){
            		console.log(event)//this指向当前Vue实例
	            },
                say:function (message,event) {
            		console.log(message,event)
                }
            }
        })
    </script>
</body>
</html>